<template>
    <div class="addBookMarkContainer"  v-drag>
        <div class="addBookMarkTitle  drag-handle" >
            <div class="title-left">
                <div class="bar"></div>
                <div class="title-text">新增书签</div>
            </div>
            <div class="title-right">
                <!-- <div  tabindex="0" class="icon">-</div> -->
                <div tabindex="0" class="icon" @click="closeDialog">×</div>
            </div>
        </div>
        <div class="addBookMarkContent">
            <!-- <input v-model="newBookmarkName" type="text" placeholder="输入书签名称" />
                <button @click="addBookmark">添加</button>
                <button @click="closeAddDialog">取消</button> -->
          
        </div>
    </div>
</template>

<script>
export default {
    name: 'AddBookMark',
    props: {
        dialogVisible: {
            type: Boolean,
            required: true,
        },
    },
    data() {
        return {
            newBookmarkName: '',
        };
    },
    computed: {
        isAddBookMarkShow() {
            // 返回 prop 的值
            return this.dialogVisible;
        },
    },
    methods: {
        closeDialog() {
            // 通过修改 prop 来关闭弹窗
            this.$emit('update:dialogVisible', false);
        },
    },
};
</script>

<style lang="scss" scoped>
.addBookMarkContainer {
    width: 25vw;
    color: white;
    position: absolute;
    top: 18vh;
    right: 45vw;
    height: 46vh;
    z-index: 2;
    .addBookMarkTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        font-size: 1rem;
        background-color: #285383;
        .title-left,
        .title-right {
            display: flex;
            align-items: center;
        }
        .bar {
            width: 5px; /* 小竖条的宽度 */
            height: 20px; /* 小竖条的高度 */
            background-color: white; /* 小竖条的颜色 */
            margin-right: 10px; /* 小竖条和文字之间的间距 */
        }
        .icon {
            width: 20px; /* 小方框的宽度 */
            height: 20px; /* 小方框的高度 */
            // border: 1px solid #4998f2; /* 小方框的边框 */
            margin-left: 5px; /* 小方框之间的间距 */
        }
        .icon:hover {
            
            color: #4998f2;
        }
        .icon:focus {
            color: #4998f2;
        }
    }
    .addBookMarkContent {
        padding: 10px;
        display: flex;
        flex-direction: column;
        background-color: #285383;
        font-size: 0.8rem;
    }
}
</style>
